<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title>供应商系统</title>
		<link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.css"/>
		<link rel="stylesheet" href="/Public/css/style.css" />
		<link rel="stylesheet" type="text/css" href="/Public/css/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="/Public/css/modify.css"/>
        <style>
            .nav{
                height: 40px;
                width: 100%;
                padding: 10px 10px 0px;
            }
            .navbox{
                width:100%;
                height:100%;
                border: 1px solid #00CC99;
                font-size: 14px;
                text-align: center;
                border-radius: 3px;
            }
            .nav a.active {
                background-color: #00CC99;
                color: #FFF;
            }
            .nav a{
                display: inline-block;
                float: left;
                width: 50%;
                height: 100%;
                line-height: 28px;
            }
            .btnbox{
                margin-bottom: 30px;
                height: 36px;
                width: 100%;
                padding: 0 15px;
            }
            .btnbox button{
                height: 100%;
                width: 100%;
                border: none;
                outline: none;
                border-radius: 4px;
                color: #FFF;
                background-color: #00CC99;
            }
            .prompt{
                position: fixed;
                left: 0;
                bottom: 0;
                background-color: #FFCCCC;
                color: #666;
                text-align: center;
                width: 100%;
                padding: 5px 0;
                font-size: 12px;
            }
        </style>
	</head>
	<body>		
		<div id="app">
			<header class="header">
				<a href="javascript:;" onclick="history.go(-1)" class="back"><i class="fa fa-angle-left"></i></a>
				<h1>调价申请</h1>
			</header>
            <nav class="nav">
                <div class="navbox">
                    <a href="/index/change_price" class="active">调价申请</a>
                    <a href="/index/history" >历史记录</a>
                </div>
            </nav>
			<div class="searchbox">
				  <input type="text" class="form-control" placeholder="搜索商品" v-model="screentext" @click.stop="searchtext='true'">
				  <div class="searchtext" v-show = "searchtext">
					<ul class="searchlist">
					  		<li v-for="list in lists" @click="setitems(list)">{{list.product_title}}</li>
					</ul>
				  </div>
			</div>
			<section class="content">
				<h2 class="hidden">调价信息</h2>
				<div class="spec_none" v-show="!items.category.length">
					请搜索商品
				</div>
				<div class="spec_show" v-show="items.category">
                    <form  method="post" enctype="multipart/form-data" id="myForm">
					<h3 class="title">{{items.title}}</h3>
					<ul class="list">
						<li v-for="(item,index) in items.category">
							<h4>规格{{numtext(index)}}: {{item.specification}}</h4>
							<p><span class="left">商品采购价</span><span class="right"><input type="number"  v-model="item.last_price" /></span></p>
						</li>
					</ul>
					<div class="bottom">
						<div class="filebox" @click="fileclick">
							<i class="fa fa-plus" v-show="!myimg"></i>
							<img :src="myimg" v-show="myimg"/>
							<input type="file"  id="file" class="hidden" @change="file"/>
						</div>
						<p>上传调价凭证</p>
					</div>
                        <div class="btnbox">
                            <button type="button" @click="sub">提交申请</button>
                        </div>
                    </form>
				</div>

			</section>
            <div class="prompt">注意：调价多个商品时请分别操作</div>
		</div>

		<script src="/Public/js/jquery-2.1.0.js"></script>
		<script src="/Public/js/vue.js"></script>
		<script src="/Public/js/vue-resource.js"></script>
		<script>
		 	var vm = new Vue({
		 		el:"#app",
		 		data:{
		 			items:{sku_id:"",title:"",category:[]},
		 			myimg:"",
		 			alldata:"",
		 			searchtext:false,
		 			screentext:"",
		 			lists:""
		 		},
		 		methods:{
		 			numtext:function(n){
		 				switch(n){				//数字转换
		 					case 0:return "一" ;
		 					case 1:return "二" ;
		 					case 2:return "三" ;
		 					case 3:return "四" ;
		 					case 4:return "五" ;
		 				}
		 			},
		 			fileclick:function(){		//模拟点击
		 				$('#file').click();
		 			},
		 			file:function(){			//预览图片 				
		 				this.myimg = URL.createObjectURL(document.getElementById('file').files[0]);		 			
		 			},
		 			sub:function(){				//保存提交
                        if(!this.myimg){
                            alert('请上传图片');
                            return false;
                        }
                        if(!vm.items.sku_id){
                           alert('请选择要调价的商品');
                           return false;
                        }
                        var formData = new FormData($("#myForm")[0]);
                        formData.append("file", document.getElementById('file').files[0]);
                        formData.append("item", JSON.stringify(vm.items));

		 				this.$http.post('/products/do_price',formData,{emulateJSON: true}).then(function(res){
                                alert('成功');
                                //window.location.reload();
						},function () {
                            alert('失败');
                        });
//                        $.ajax({
//                            url: '/products/do_price',
//                            type: 'POST',
//                            data: formData,
//                            dataType: 'JSON',
//                            cache: false,
//                            processData: false,
//                            contentType: false
//                        });

		 			},
		 			setitems:function(list){	 			//搜索查询点击	
		 				this.items.title = list.product_title;
		 				this.items.sku_id = list.sku_id;
		 				this.items.category = list.specification_arr;
		 				this.screentext = list.product_title;
		 				this.searchtext = false;
		 			}
		 		},
		 		created:function(){
                    var sku_id;
		 		    if( window.location.search){
                        sku_id = window.location.search.split("?")[1].split("=")[1];//取地址参数部分
                    }

		 			this.$http.get('/products/change_price_show',{emulateJSON: true}).then(function(res){		//初始化赋值
		 						this.alldata = res.data.data;
		 						this.lists = res.data.data;
		 						console.log(this.alldata);
		 					    if(sku_id){
                                    for(var i in this.alldata){
                                        if(sku_id == this.alldata[i].sku_id){
                                            console.log(this.alldata[i].sku_id);
                                            this.items.title = this.alldata[i].product_title;
                                            this.items.sku_id = this.alldata[i].sku_id;
                                            this.items.category = this.alldata[i].specification_arr;
                                            this.screentext = this.alldata[i].product_title;
                                        }
                                    }
                                }
						},function(){
							
						});	
		 		},		 	
		 		watch:{								
		 			screentext:function(val){		//输入遍历
		 				this.lists = [];
		 				for(var i in this.alldata){		 				
		 					if(this.alldata[i].product_title.indexOf(val)!=-1){
		 					this.lists.push(this.alldata[i]);
		 				}
		 				}
		 				
		 			}
		 		}
		 	});
		</script>
	</body>
</html>
